<template>
	<view class="books">
		<ul>
			<li v-for="item in books"  @click="click(item.BookId)" @longpress="longtime(item.BookId)">
				<image :src="item.BookCover" ></image>
				<p>{{item.BookName}}</p>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		name:"bookracks",
    props:{
      books:Array,
    },
		data() {
			return {

			};
		},
    methods:{
      click:function(BookId){
        console.log("bookid"+BookId)
        uni.navigateTo({
          url:"../../pages/read/read?bookid="+BookId
        })
      },
      longtime(BookId){
        console.log("bookid"+BookId)
        uni.navigateTo({
          url:"../../pages/details/details?BookId="+BookId
        })
      }
    }
	}
</script>

<style lang="scss">
	.books{
		width: 100px;
		height: 100px;
	}
	.books ul{
		width: 100vw;
		height: 56vh;
		margin-top: 2vh;
	}
	.books li{
		width: 30vw;
		height: 27vh;
		float: left;
		margin-left: 3vw;
	}
	.books li image{
		margin-left: 2vw;
		width: 25vw;
		height: 20vh;
		float: left;
	}
	.books p{
		line-height: 5vh;
		margin-left: 2vw;
		width: 25vw;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		text-align: center;
	}
</style>
